<template>
	<view class="container">
		<u-notify ref="popup"></u-notify>

		<uni-collapse accordion class="uni-collapse">
			<uni-collapse-item title="总览" open :show-animation="true">
				<view class="view-block">
					<uni-row class="row">
						<uni-col :span="10">
							<view class="view-block-view" style="width: 100%;" @click="onClick(0)">
								<text class="view-block-title">文章</text>
								<uni-icons class="view-block-icon" type="plus" color="#2F54EB" size="20"></uni-icons>
								<u-count-to class="view-block-text" :startVal="0" :endVal="postCount" color="#000000"
									fontSize="2em"></u-count-to>
							</view>
						</uni-col>
						<uni-col :span="10" :push="2">
							<view class="view-block-view" @click="onClick(1)">
								<text class="view-block-title">评论</text>
								<uni-icons class="view-block-icon" type="list" color="#2F54EB" size="20"></uni-icons>
								<u-count-to class="view-block-text" :startVal="0" :endVal="commentCount" color="#000000"
									fontSize="2em"></u-count-to>
							</view>
						</uni-col>
					</uni-row>
					
					<uni-row class="row">
						<uni-col :span="10">
							<view class="view-block-view" @click="onClick(2)">
								<text class="view-block-title">分类</text>
								<uni-icons class="view-block-icon" type="info" color="#2F54EB" size="20"></uni-icons>
								<u-count-to class="view-block-text" :startVal="0" :endVal="categoryCount"
									color="#000000" fontSize="2em"></u-count-to>
							</view>
						</uni-col>
						<uni-col :span="10" :push="2">
							<view class="view-block-view" @click="onClick(3)">
								<text class="view-block-title">标签</text>
								<uni-icons class="view-block-icon" type="info" color="#2F54EB" size="20"></uni-icons>
								<u-count-to class="view-block-text" :startVal="0" :endVal="tagCount" color="#000000"
									fontSize="2em"></u-count-to>
							</view>
						</uni-col>
					</uni-row>
					
					<uni-row class="row">
						<uni-col :span="10">
							<view class="view-block-view" @click="onClick(4)">
								<text class="view-block-title">日志</text>
								<uni-icons class="view-block-icon" type="info" color="#2F54EB" size="20"></uni-icons>
								<u-count-to class="view-block-text" :startVal="0" :endVal="journalCount" color="#000000"
									fontSize="2em"></u-count-to>
							</view>
						</uni-col>
						<uni-col :span="10" :push="2">
							<view class="view-block-view" @click="onClick(5)">
								<text class="view-block-title">链接</text>
								<uni-icons class="view-block-icon" type="link" color="#2F54EB" size="20"></uni-icons>
								<u-count-to class="view-block-text" :startVal="0" :endVal="linkCount" color="#000000"
									fontSize="2em"></u-count-to>
							</view>
						</uni-col>
						
					</uni-row>

					<uni-row class="row">
						<uni-col :span="10">
							<view class="view-block-view">
								<text class="view-block-title">阅读量</text>
								<!-- <uni-icons class="view-block-icon" type="info" color="#2F54EB" size="20"></uni-icons> -->
								<u-count-to class="view-block-text" :startVal="0" :endVal="visitCount" color="#000000"
									fontSize="2em"></u-count-to>
							</view>
						</uni-col>
						<uni-col :span="10" :push="2">
							<view class="view-block-view">
								<text class="view-block-title">建立天数</text>
								<!-- <uni-icons class="view-block-icon" type="info" color="#2F54EB" size="20"></uni-icons> -->
								<u-count-to class="view-block-text" :startVal="0" :endVal="establishDays"
									color="#000000" fontSize="2em"></u-count-to>
							</view>
						</uni-col>
					</uni-row>
					
					

					<uni-row class="row">
						<uni-col :span="10">
							<view class="view-block-view">
								<text class="view-block-title">点赞</text>
								<!-- <uni-icons class="view-block-icon" type="info" color="#2F54EB" size="20"></uni-icons> -->
								<u-count-to class="view-block-text" :startVal="0" :endVal="likeCount" color="#000000"
									fontSize="2em"></u-count-to>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</uni-collapse-item>
			<uni-collapse-item title="最近文章" :show-animation="true">
				<view class="view-latestPost">
					<view class="view-latestPost-block" v-for="(post, i) in posts" @click="selectPost(i)"
						:style="post.status === 'RECYCLE' ? 'color:gray;' : ''">
						<uni-row>
							<uni-col :span="15">
								<text>{{ post.title }}</text>
							</uni-col>
							<uni-col :span="9" :push="0" style="text-align: right;font-size: .9em;">
								<text>{{ format(Number(post.createTime)) }}</text>
							</uni-col>
						</uni-row>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	import {
		getLatestPosts
	} from "@/network/PostApi.js";
	import {
		getBlogStatistics
	} from "@/network/OtherApi.js";
	
	export default {
		data() {
			return {
				// popup弹窗类型和信息
				popupType: "error",
				popupMessage: "",

				// 博客统计信息变量
				postCount: "",
				commentCount: "",
				categoryCount: "",
				tagCount: "",
				journalCount: "",
				// birthday: "",
				establishDays: "",
				linkCount: "",
				visitCount: "",
				likeCount: "",

				// 最近文章变量
				posts: {},

			}
		},
		
		onShow: function() {
			// 加载博客统计信息
			this.loadBlogStatistics()
			// 加载最近文章
			this.loadLatestPosts()
		},

		/**
		 * 下拉刷新事件
		 */
		onPullDownRefresh() {
			// 加载博客统计信息
			this.loadBlogStatistics()
			// 加载最近文章
			this.loadLatestPosts()
		},

		methods: {
			/**
			 * 加载博客统计信息
			 */
			loadBlogStatistics: function() {
				let that = this;
				getBlogStatistics().then(data => {
					that.postCount = data.postCount
					that.commentCount = data.commentCount
					that.categoryCount = data.categoryCount
					that.tagCount = data.tagCount
					that.journalCount = data.journalCount
					that.establishDays = data.establishDays
					that.linkCount = data.linkCount
					that.visitCount = data.visitCount
					that.likeCount = data.likeCount
					// 停止下拉刷新
					uni.stopPullDownRefresh()
				}).catch(err => {
					uni.showModal({
						title: "获取仪表盘数据失败",
						content: err,
						showCancel: false
					});
					// 停止下拉刷新
					uni.stopPullDownRefresh()
				})
			},

			/**
			 * 加载最近10篇文章
			 */
			loadLatestPosts: function() {
				let that = this;
				getLatestPosts("10").then(data => {
					that.posts = data;
					// 停止下拉刷新
					uni.stopPullDownRefresh()
				}).catch(err => {
					uni.showModal({
						title: "获取仪表盘数据失败",
						content: err,
						showCancel: false
					});
					// 停止下拉刷新
					uni.stopPullDownRefresh()
				})
			},
		

			/**
			 * 最近文章中的每个文章的点击事件，打开网址
			 * @param {Object} i
			 */
			selectPost: function(i) {
				let post = this.posts[i];
				if (post.status === "RECYCLE") {
					this.popup("当前文章在回收站，无法查看");
					return ;
				}
				let url = this.getUrl() + post.fullPath
				this.openURL(url)
			},

			/**
			 * 总览中方块点击事件
			 * @param {Object} i
			 */
			onClick: function(i) {
				switch (i) {
					// 文章
					case 0:
						uni.navigateTo({
							url: '../posts/posts'
						});
						break;
					// 评论
					case 1:
						uni.navigateTo({
							url: '../comments/comments'
						});
						break;
					// 分类
					case 2:
						uni.navigateTo({
							url: '../categories/categories'
						});
						break;
					// 标签
					case 3:
						uni.navigateTo({
							url: '../tags/tags'
						});
						break;
					// 日志
					case 4:
						uni.navigateTo({
							url: '../journals/journals'
						});
						break;
					// 链接
					case 5:
						uni.navigateTo({
							url: '../links/links'
						});
						break;

				}
			},

			/**
			 * popup弹出层
			 */
			popup: function(message, type = "error") {
				if (type === "error") {
					this.$refs.popup.error(message);
				} else {
					this.$refs.popup.success(message);
				}
			},
		}
	}
</script>

<style>
	.container {
		background-color: #F0F2F5;
		padding: 30rpx;
	}

	.uni-collapse {
		margin-bottom: 150rpx;
	}

	.view-block {
		width: 100%;
		display: block;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		padding: 10rpx;
	}


	.view-block-view {
		background-color: #FFFFFF;
		width: 100%;
		box-shadow: 1px 1px 10px rgba(216, 216, 216, .6);
		padding: 20rpx;
		position: relative;
	}

	.view-block-title {
		display: block;
		margin-top: 20rpx;
		margin-left: 20rpx;
		color: #8C8C8C;
	}


	.view-block-icon {
		position: absolute;
		top: 38rpx;
		right: 30rpx;
	}

	.view-block-text {
		margin-left: 20rpx;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}

	.row {
		margin-bottom: 20rpx;
	}

	.view-latestPost {
		position: relative;
	}

	.view-latestPost-title {
		font-size: 1.2em;
	}

	.view-latestPost-block {
		margin-left: 10rpx;
		margin-right: 10rpx;
		padding: 20rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #eeeeee;
	}

	.view-latestPost-block:last-child {
		border-bottom: none;
	}

	.view-latestPost-block:active {
		background-color: #e9ebec;
	}
</style>
